<template>
  <div>
    <el-row class="home" :gutter="20">
      <el-col :span="12" style="margin-top: 20px">
        <el-card shadow="hover" style="width: auto">
          <div class="user">
            <img src="../assets/Capgemini-logo.png" />
            <div class="user-info">
              <p class="name" style="font-size: 30px">你好,Admin</p>
              <p class="role"></p>
            </div>
          </div>
          <div class="login-info">
            <p>上次登陆时间:<span>2022-7-11</span></p>
            <p>上次登陆地点：<span>北京</span></p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" style="margin-top: 20px"></el-col>
    </el-row>

    <h1 style="font-size: 40px">欢迎使用Capgemini项目管理系统</h1>
    <div id="linecharts"></div>

    <div class="main"></div>
  </div>
</template>

<script>
/* eslint-disable */
import { defineComponent } from "vue";
import { onMounted } from "vue";
import * as echarts from "echarts";
export default defineComponent({
  setup() {
    onMounted(() => {
      var myChart = echarts.init(document.getElementById("linecharts"));
      myChart.setOption({
        title: {
          text: "项目管理系统",
          left: "center",
          top: "center",
        },
        series: [
          {
            type: "pie",
            data: [
              {
                value: 335,
                name: "人员查询",
              },
              {
                value: 300,
                name: "项目管理",
              },
              {
                value: 300,
                name: "字典维护",
              },
            ],
            radius: ["40%", "70%"],
          },
        ],
      });
    });
    return {};
  },
});
</script>

<style lang="less" scoped>
//   height: 100vh;
//   background-color: #ccc;
.user {
}
.home {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  // border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
  img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 40px;
  }
}
.login-info {
  p {
    line-height: 30px;
    font-size: 20px;
    color: #999;
    span {
      color: #666;
      margin-left: 60px;
    }
  }
}
h1 {
  text-align: center;
}
#linecharts {
  width: 500px;
  height: 700px;
  margin-left: 500px;
  margin-top: -150px;
}
</style>
